<template>
	<div style="font-size: 14px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex;">
		<!-- div收缩按钮 -->
		<div style="flex: 1;font-size: 18px;">
			<span :class="collspanBtnClass" @click="aa">
			</span>
		</div>
		<el-dropdown style="width: 150px;cursor: pointer;">
			<div>
				<img :src="userObj.userFace" alt="" 
				style="width: 30px;height: 30px; border-radius: 50%;position: relative;top:5px;margin-right: 5px;">
				<span>{{userObj.username}}</span><i class="el-icon-arrow-down" style="margin-left: 10px;"></i>
			</div>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item>
					<span @click="userInfo">个人信息</span>
				</el-dropdown-item>
				<el-dropdown-item ><span @click="exit()">退出</span></el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
	</div>
</template>
<script>
	export default{
		data() {
			return {
				userObj:{
					
				}
			}
		},
		props:{
			collspanBtnClass:String,
			collspanBtn:Boolean
		},
		created() {
			this.setUser()
		},
		methods:{
			aa(){
				this.$emit("changeAside");
			},
			userInfo(){
				this.$router.push('/main/person');
			},
			setUser(){
				let userStr = sessionStorage.getItem('user')
				if(userStr && userStr !== undefined) {
					this.userObj=JSON.parse(userStr);
				}
			},
			exit(){
				//清空sessionStore中的信息
				sessionStorage.removeItem("user");
				//菜单选项置为空
				var clearMenuList=[];
				this.$store.commit("initRouters" , clearMenuList);
				
				this.$router.push("/");
			}
		}
	}
</script>
<style>
</style>
